<!--
 * @Author: your name
 * @Date: 2021-07-01 20:08:10
 * @LastEditTime: 2021-07-05 10:45:34
 * @LastEditors: MineMikoto
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-client-ui\src\views\contract.vue
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <section class="page-section" id="contact">
      <div class="container">
        <div class="text-center">
          <h2 class="section-heading text-uppercase">联系我</h2>
        </div>
        <!-- * * * * * * * * * * * * * * *-->
        <!-- * * SB Forms Contact Form * *-->
        <!-- * * * * * * * * * * * * * * *-->
        <!-- This form is pre-integrated with SB Forms.-->
        <!-- To make this form functional, sign up at-->
        <!-- https://startbootstrap.com/solution/contact-forms-->
        <!-- to get an API token!-->
        <form id="contactForm" data-sb-form-api-token="API_TOKEN">
          <div class="row align-items-stretch mb-5">
            <div class="col-md-6">
              <div class="form-group">
                <!-- Name input-->
                <input
                  class="form-control"
                  id="name"
                  type="text"
                  placeholder="你的名字 *"
                  data-sb-validations="required"
                />
                <div class="invalid-feedback" data-sb-feedback="name:required">
                  名字必填
                </div>
              </div>
              <div class="form-group">
                <!-- Email address input-->
                <input
                  class="form-control"
                  id="email"
                  type="email"
                  placeholder="你的邮箱 *"
                  data-sb-validations="required,email"
                />
                <div class="invalid-feedback" data-sb-feedback="email:required">
                  邮箱必填
                </div>
                <div class="invalid-feedback" data-sb-feedback="email:email">
                  邮箱不对
                </div>
              </div>
              <div class="form-group mb-md-0">
                <!-- Phone number input-->
                <input
                  class="form-control"
                  id="phone"
                  type="tel"
                  placeholder="你的手机号码 *"
                  data-sb-validations="required"
                />
                <div class="invalid-feedback" data-sb-feedback="phone:required">
                  手机号必填
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group form-group-textarea mb-md-0">
                <!-- Message input-->
                <textarea
                  class="form-control"
                  id="message"
                  placeholder="你的信息 *"
                  data-sb-validations="required"
                ></textarea>
                <div
                  class="invalid-feedback"
                  data-sb-feedback="message:required"
                >
                  信息必填
                </div>
              </div>
            </div>
          </div>
          <!-- Submit success message-->
          <!---->
          <!-- This is what your users will see when the form-->
          <!-- has successfully submitted-->
          <div class="d-none" id="submitSuccessMessage">
            <div class="text-center text-white mb-3">
              <div class="fw-bolder">提交成功！</div>
            </div>
          </div>
          <!-- Submit error message-->
          <!---->
          <!-- This is what your users will see when there is-->
          <!-- an error submitting the form-->
          <div class="d-none" id="submitErrorMessage">
            <div class="text-center text-danger mb-3">错了</div>
          </div>
          <!-- Submit Button-->
          <div class="text-center">
            <button
              class="btn btn-primary btn-xl text-uppercase disabled"
              id="submitButton"
              type="submit"
            >
              提交信息
            </button>
          </div>
        </form>
      </div>
    </section>
    <footer class="footer py-4">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-4 text-lg-start">
            Copyright &copy; MineMikoto 2021
          </div>
          <div class="col-lg-4 my-3 my-lg-0"></div>
          <div class="col-lg-4 text-lg-end">
            <a
              class="link-dark text-decoration-none me-3"
              href="https://github.com/MineMikoto"
              >我的GitHub账号</a
            >
            <a
              class="link-dark text-decoration-none"
              href="https://space.bilibili.com/22737553"
              >我的哔哩哔哩账号</a
            >
          </div>
        </div>
      </div>
    </footer>
    
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="../u"></script>
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <!-- * *                               SB Forms JS                               * *-->
        <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script>
 
// 1. 引入ajax接口，请求工具

import "../style/styles.css";
import { get } from "../utils/request";
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
.home {
  .title {
    font-size: 20px;
    line-height: 2em;
    font-weight: bold;
  }
  // 居中容器
  .wrapper {
    width: 90%;
    margin: 0 auto;
  }
  // 大图
  .bg_pic {
    img {
      width: 100%;
    }
  }
  // 游学项目
  .projects {
    .project {
      margin-bottom: 1em;
      & > div {
        height: 200px;
      }
      .project_pic {
        width: 300px;
        float: left;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .project_info {
        margin-left: 320px;
        .project_name {
          line-height: 1.6em;
          font-weight: bolder;
        }
      }
    }
  }
}
</style>